import React, { Component } from 'react'
import Picker from 'react-native-picker';
import { View, Text, Image, StatusBar, StyleSheet, TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
import { pxToDp } from '../../../utils/stylesKits'
import { Input } from 'react-native-elements';
import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { validatePhone } from '../../../utils/validator';
import request from '../../../utils/request';
import { ACCOUNT_LOGIN } from '../../../utils/pathMap';
// import {Toast} from 'teaset';
import ImagePicker from 'react-native-image-crop-picker';
import Toast from "../../../utils/Toast";
import THButton from "../../components/THButton";
import { removeGun, addGun, getUserData } from '../../../redux/actions/userAction'
import LinearGradient from "react-native-linear-gradient";
import axios from 'axios';
// import {observer, inject} from 'mobx-react';
// @inject("RootStore") 
// @observer

export class Login extends Component {
  state = {
    phone: '',
    errorMessage: false
  }
  componentDidMount() {
    this.props.getUserData();
    let data = [];
    for (var i = 0; i < 100; i++) {
      data.push(i);
    }
    Picker.init({
      pickerData: data,
      selectedValue: [59],
      onPickerConfirm: data => {
        console.log(data);
      },
      onPickerCancel: data => {
        console.log(data);
      },
      onPickerSelect: data => {
        console.log(data);
      }
    });
    // Picker.show();
  }
  phoneChangeEnd = async () => {
    const { phone } = this.state;
    if (!validatePhone(phone)) {
      this.setState({
        errorMessage: true
      })
      return false;
    }
    this.setState({
      errorMessage: false
    })
    Toast.showLoading('请求中...');
    // Toast.message("验证码不正确",2000,"center");
    // console.error(Toast, '请提示')
    // Toast.message('Toast message', 1000);
    // const res = await request.post(ACCOUNT_LOGIN, {
    //   phone: this.state.phone
    // })
    console.error(res, '打印请求结果')
    setTimeout(() => {
      Toast.hideLoading();
    }, 3000)
  }
  phoneNumberSubmitEditing = () => {
    this.props.addGun();
    // this.props.getUserData();
   }
  chooseImage = async() => { 
    // 获取到 选中后的图片
    const image = await ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true
    });
    console.warn('照片', image)
  }
  phoneChange = (val) => {
    this.setState({
      phone: val
    });
  }
  render() {
    return (
      <View>
        <StatusBar backgroundColor="transparent" translucent={true}></StatusBar>
        <Image style={{ width: "100%", height: pxToDp(200) }} source={require('../../../res/profileBackground.jpg')}></Image>
        <View style={[styles.mainContent]}>
          <View><Text style={[styles.registerTitle]}>手机号登录注册</Text></View>
        </View>
      
        <View style={[styles.inputWrap]}>
          {/* icon字体图标 */}
         {/* <Text style={{fontFamily: 'iconfont', color: 'yellow'}}>{'\ue612'}</Text>  */}
        <Ionicons name={'person-outline'} size={20}></Ionicons>
          <Input placeholder='请输入密码'
            maxLength={11} keyboardType='phone-pad'
            onChangeText={this.phoneChange}
            value={this.state.phone}
            errorMessage={this.state.errorMessage ? '请输入正确的手机号' : ''}
            onSubmitEditing={this.phoneChangeEnd}
            leftIcon={{ type: 'ionicons', name: 'phone', color: "#ccc", size: pxToDp(20) }}
          />
        </View>
        {/* 渐变按钮  */}

        <View style={{ width: "100%", height: 60 }}>
          <THButton
            onPress={this.chooseImage}
            style={{
              width: "85%",
              height: "100%",
              alignSelf: "center",
              height: pxToDp(40),
              borderRadius: pxToDp(20)
            }}>
            获取验证码
          </THButton>
          {/* <Text>异步更新全局</Text><Text>{this.props.mobile}</Text> */}
        </View>

      </View>
    )
  }
}
const mapStatetoProps = (state) => {
  console.log(state, 'messi')
  return { ...state } 
}
const actionCreaters = { removeGun, addGun, getUserData };
Login = connect(mapStatetoProps, actionCreaters)(Login);

export default Login;

const styles = StyleSheet.create({
  mainContent: {
    padding: pxToDp(10)
  },
  registerTitle: {
    fontSize: pxToDp(20),
    color: '#888',
    fontWeight: 'bold'
  },
  inputWrap: {
    paddingHorizontal: 14
  },
  commonInput: {
    flexDirection: 'row',
    marginTop: 0,
    borderBottomWidth: 1,
    borderBottomColor: 'salmon',
    paddingBottom: 5
  },
  linearGradient: {
    flex: 1,
    paddingLeft: pxToDp(15),
    paddingRight: pxToDp(15),
    borderRadius: pxToDp(5),
    width: "100%",
    height: 50,
    justifyContent: "center",
    alignItems: "center"
  }
})